<template>
  <el-card class="box-card">
    <!-- 表单 -->
    <el-row type="flex" justify="space-between" align="top" class="formdate">
      <el-form ref="form" :model="form" :inline="true">
        <el-form-item prop="username">
          <el-input
            v-model="form.username"
            placeholder="管理员账号"
            size="small"
            clearable
            @clear="getuserList"
          />
        </el-form-item>
        <el-form-item prop="email">
          <el-input
            v-model="form.email"
            placeholder="管理员邮箱"
            size="small"
            clearable
            @clear="getuserList"
          />
        </el-form-item>
        <el-form-item prop="status">
          <el-select
            v-model="form.status"
            size="small"
            placeholder="请选择"
            clearable
            @clear="getuserList"
          >
            <el-option label="全部" value="" />
            <el-option label="启用" value="1" />
            <el-option label="禁用" value="2" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            plain
            size="small"
            @click="getUserINfoByxxx"
          >查询</el-button>
          <el-button size="small" @click="restClear">重置</el-button>
        </el-form-item>
      </el-form>
      <!-- /表单 -->
      <!-- 右侧按钮 -->
      <div>
        <el-button type="primary" plain size="medium" @click="$refs.addUser.showDialog=true">
          创建用户
        </el-button>
      </div>
      <!-- /右侧按钮 -->
    </el-row>
    <!-- 表格主体 -->
    <el-table :data="adminData" border style="width: 100%">
      <el-table-column prop="id" label="管理员ID" width="80" />
      <el-table-column prop="username" label="管理员姓名" />
      <el-table-column prop="phone" label="手机号" />
      <el-table-column prop="email" label="管理员邮箱" />
      <el-table-column prop="avatar" label="管理员头像" align="center">
        <template slot-scope="{row}">
          <el-avatar :size="number" :src="`http://122.51.249.55:7005/${row.avatar}`" />
        </template>
      </el-table-column>
      <el-table-column prop="roles_names" label="管理员角色" align="center">
        <template slot-scope="{row}">
          <el-tag
            v-for="item in row.roles_names"
            :key="item"
          >
            {{ item }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="updated_at" label="添加时间" width="200" />
      <el-table-column prop="status" label="状态" align="center">
        <!-- <el-switch v-model="value" active-color="#409eff" /> -->
        <template slot-scope="{row}">
          <el-switch
            :value="row.status"

            :active-value="1"
            :inactive-value="2"
            @change="switchChange(row)"
          />
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="{row}">
          <el-button type="primary" icon="el-icon-edit" circle size="small" @click="editRole(row.id)" />
          <el-button type="danger" icon="el-icon-delete" circle size="small" @click="delRole(row.id)" />
        </template>
      </el-table-column>
    </el-table>
    <!-- 表格主体 -->

    <!-- 分页组件 -->
    <el-row type="flex" justify="end" align="middle" style="height: 60px">
      <el-pagination
        background
        :current-page="page.page"
        :page-sizes="[1,3,5,10]"
        :page-size="page.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-row>
    <!-- 分页组件 -->
    <add-user ref="addUser" @update-list="getuserList" />
  </el-card>
</template>

<script>
import { getuserList, updateStatus, delRole, getUserInfo, getUserINfoByxxx } from '@/api/user'
import AddUser from './components/addUser.vue'
export default {
  name: 'UserInfo',

  components: { AddUser },
  props: {},
  data() {
    return {
      form: {
        username: '',
        email: '',
        status: ''
      },
      adminData: [], // 管理员数据列表
      number: 60, // 头像大小
      page: {
        page: 1, // 当前页码
        total: 0, // 总数
        limit: 10// 限制条数
      }
    }
  },
  computed: {},

  watch: {},

  created() {
    this.getuserList()
  },

  mounted() {},

  methods: {
    onSubmit() { // 查询地址
    },
    reset() { // 重置事件
    },
    async getuserList() { // 获取用户列表
      const { data } = await getuserList(this.page)
      this.adminData = data.list
      this.page.total = data.total
      this.page.currentPage = data.page
    },
    async switchChange(row) { // 开关切换事件
      console.log(row)
      var num = row.status * 1 === 1 ? 2 : 1
      await updateStatus(row.id, num)
      row.status = num
      this.$message.success('更新用户状态成功')
    },
    handleCurrentChange(val) { // val是最新页码数
      this.page.page = val
      // 判断搜索表单是否有数据存在,如果表单内有数据存在，分页切换时要请求的是筛选后的结果
      if (this.form.username || this.form.email || this.form.state) {
        this.getUserINfoByxxx()
      } else {
        this.getuserList()
      }
    },
    handleSizeChange(val) { // 最新页显示条数
      this.page.limit = val
      // 判断搜索表单是否有数据存在
      if (this.form.username || this.form.email || this.form.state) {
        this.getUserINfoByxxx()
      } else {
        this.getuserList()
      }
    },
    async delRole(id) { // 删除管理员
      if (this.adminData.length === 1 && this.page.page !== 1) {
        this.page.page--
      }
      await this.$confirm('确定删除该管理员吗？')
      await delRole(id)
      this.$message.success('删除成功')
      this.getuserList()
    },
    async editRole(id) { // 编辑事件
      this.$refs.addUser.showDialog = true
      const { data } = await getUserInfo(id)
      this.$refs.addUser.ruleForm = data
    },
    async  getUserINfoByxxx() { // 条件查询
      const { data } = await getUserINfoByxxx(this.form)
      this.adminData = data.list
      this.page.total = data.total
      this.page.limit = data.limit
      this.page.currentPage = data.page
    },
    restClear() { // 筛选表单重置时间
      this.form = {
        username: '',
        email: '',
        status: ''
      }
      this.getuserList()
    }

  }
}
</script>

<style scoped lang="scss">
.box-card {
  margin: 20px;
  .formdate {
    top: 10px;
  }
}
</style>
